<script setup lang="ts">
import Right from "@/static/mine/right.svg";
import { ref } from "vue";
import clipboard from "@/utils/clipboard";
import { SHARE_URL } from "@/config";
import LPainter from "@/components/l-painter/l-painter.vue";
import shareBg from "@/static/mine/share-bg.png";

export interface VipSelectListProps {
  icon: string;
  label: string;
  toUrl: string;
  type?: string;
}

interface ShareParams {
  uuid: string;
  profile_photo: string;
  user_name: string;
}
const props = defineProps<{
  params: ShareParams;
}>();

const shareLink = ref("");
const shareAvatar = ref("");
const shareName = ref("");
const createImg = ref("");
const share = ref();
const poster = ref();

const vipSelectList = ref<VipSelectListProps[]>([
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/share-link.svg",
    label: "分享链接",
    type: "share",
    toUrl: ""
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/fan.svg",
    label: "我的粉丝",
    toUrl: "/pages/mine/sub-pages/fan"
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/profit.svg",
    label: "我的收益",
    toUrl: "/pages/mine/sub-pages/profit"
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/dingdan.svg",
    label: "我的订单",
    toUrl: "/pages/mine/sub-pages/order"
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/history-chat.svg",
    label: "历史聊天",
    toUrl: "/pages/mine/sub-pages/history-chat"
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/protocol.svg",
    label: "用户协议",
    toUrl: "/pages/privacy/privacy?type=1"
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/privacy.svg",
    label: "隐私条款",
    toUrl: "/pages/privacy/privacy?type=2"
  }
  /* {
    icon: Sms,
    label: "我的消息",
    toUrl: "/pages/mine/sub-pages/history"
  },
  {
    icon: Kefu,
    label: "客服中心",
    toUrl: "",
    type: "kefu"
  },
  {
    icon: YiJian,
    label: "意见反馈",
    toUrl: "/pages/mine/sub-pages/opinion"
  },
  {
    icon: Help,
    label: "帮助中心",
    toUrl: "/pages/mine/sub-pages/help-center"
  } */
]);

const handleToPage = (item: VipSelectListProps) => {
  if (item.type === "share") {
    if (!props.params.uuid) {
      uni.showModal({
        title: "提示",
        content: "登录已失效，请重新登录",
        confirmText: "去登录",
        success(res) {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/login/login"
            });
          }
        }
      });
    } else {
      poster.value = {
        css: {
          width: "540rpx"
        },
        views: [
          {
            src: shareBg,
            type: "image",
            css: {
              objectFit: "contain",
              objectPosition: "50% 50%",
              width: "540rpx",
              // height: "1112rpx",
              position: "relative"
            }
          },
          {
            src: shareAvatar,
            type: "image",
            css: {
              position: "absolute",
              bottom: "186rpx",
              left: "80rpx",
              width: "60rpx",
              height: "60rpx",
              borderRadius: "50%",
              objectFit: "cover",
              boxSizing: "border-box"
            }
          },
          {
            type: "text",
            text: shareName,
            css: {
              position: "absolute",
              bottom: "122rpx",
              left: "80rpx",
              color: "#333333",
              fontSize: "32rpx",
              fontWeight: "bold"
            }
          },
          {
            type: "text",
            text: "邀您一起赚取收益",
            css: {
              position: "absolute",
              bottom: "80rpx",
              left: "80rpx",
              color: "#999999",
              fontSize: "24rpx",
              fontWeight: "400"
            }
          },
          {
            type: "qrcode",
            text: shareLink,
            css: {
              position: "absolute",
              bottom: "80rpx",
              right: "60rpx",
              width: "100rpx",
              height: "100rpx",
              padding: "10rpx",
              background: "#fff",
              borderRadius: "10rpx"
            }
          }
        ]
      };
      share.value.open();
      shareLink.value = SHARE_URL + "/#/?share_user_uuid=" + props.params.uuid;
      shareAvatar.value = props.params.profile_photo
        ? props.params.profile_photo
        : "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/avatar.png";
      shareName.value = props.params.user_name;
    }
    return;
  }

  uni.navigateTo({ url: `${item.toUrl}` });
};
const handleClose = () => {
  share.value.close();
};

function onSuccess(path: string) {
  // console.log(path);
  createImg.value = path;
}
function onFail(error: any) {
  console.error("fail", error);
}
function onSavePic() {
  if (createImg.value) {
    uni.saveImageToPhotosAlbum({
      filePath: createImg.value,
      success() {
        uni.showToast({
          title: "保存成功"
        });
      },
      fail(error) {
        uni.showToast({ title: "保存失败", icon: "none" });
        console.log(error);
      }
    });
  }
}
</script>

<template>
  <Flex
    v-for="(item, index) in vipSelectList"
    :key="index"
    class="vip-list"
    justify="space-between"
    align="center"
    @click="handleToPage(item)"
    customStyle="padding: 16px 15px;position: relative;"
  >
    <Flex justify="center" align="center">
      <image class="icon" :src="item.icon" mode="scaleToFill" />
      <view class="label">{{ item.label }}</view>
    </Flex>
    <image :src="Right" mode="scaleToFill" class="right" />
  </Flex>
  <uv-popup ref="share" bgColor="none" :closeable="true">
    <!-- #ifdef H5 -->
    <l-painter
      useCORS
      :board="poster"
      isCanvasToTempFilePath
      hidden
      @success="onSuccess"
      @fail="onFail"
    />
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <l-painter
      useCORS
      :board="poster"
      path-type="url"
      isCanvasToTempFilePath
      hidden
      @success="onSuccess"
      @fail="onFail"
    />
    <!-- #endif -->
    <uv-loading-icon
      v-if="!createImg"
      mode="semicircle"
      text="生成中"
    ></uv-loading-icon>
    <template v-else>
      <image
        mode="widthFix"
        :src="createImg"
        style="width: 540rpx; margin-top: 60rpx"
      ></image>
      <view class="action">
        <uv-image
          @click="clipboard(shareLink)"
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/share-copy-btn.svg"
          mode="aspectFit"
          :fade="false"
          width="130"
          height="40"
        ></uv-image>
        <!-- #ifdef MP-WEIXIN -->
        <uv-image
          @click="onSavePic"
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/share-save-btn.svg"
          mode="aspectFit"
          :fade="false"
          width="130"
          height="40"
        ></uv-image>
        <!-- #endif -->
      </view>
      <view class="close">
        <uv-image
          @click="handleClose"
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/share-close-btn.svg"
          mode="aspectFit"
          :fade="false"
          width="34"
          height="34"
        ></uv-image>
      </view>
    </template>
  </uv-popup>
</template>

<style lang="scss" scoped>
// .h5-share-bg {
//   position: fixed;
//   // top: -1000px;
//   // left: -1000px;
//   width: 1px;
//   height: 1px;
// }
::v-deep .uv-popup__content {
  border-radius: 20px;

  .uv-input {
    margin: 20px 0;
    padding: 10px 0 !important;
  }

  .uv-input__content__field-wrapper__field {
    color: #999 !important;
    padding: 0 6px;
  }
}

.vip-list {
  .icon {
    width: 20px;
    height: 20px;
  }

  .label {
    color: #19191c;
    font-family: "PingFang SC";
    font-size: 14px;
    padding-left: 9px;
  }

  .right {
    width: 16px;
    height: 16px;
  }
}

.action {
  display: flex;
  justify-content: space-around;
  // margin: 20px 0 40px;
}

.close {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
